<template>
  <div class="farmForm">
    <!--      设置容器高度-->
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="100%" style="background-color: rgb(238, 241, 246)">
        <el-row :gutter="20">
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <div class="grid-content bg-purple">
                <el-input
                  v-model="input"
                  placeholder="请输入"
                  class="input-with-select"
                >
                  <template #prepend>
                    <el-select ref="“optionRef”" v-model="select" clearable placeholder="请选择" style="width: 105px">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                  <template #append>
                    <el-button type="primary" icon="el-icon-search" plain @click="search">搜索</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <el-button type="primary" icon="el-icon-plus" plain @click="showAddFarm">添加合作农场</el-button>
            </div>
          </el-col>
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <el-button
                type="primary"
                icon="el-icon-refresh"
                plain
                @click="load()"
              >
                刷新
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-dialog title="请仔细核对信息：" :visible.sync="dialogFormVisible">
          <template>
            <el-form
              ref="vForm"
              :model="formData"
              :rules="rules"
              label-position="left"
              label-width="150px"
              size="medium"
              @submit.native.prevent
            >
              <el-row>
                <el-col :span="10" :offset="1" class="grid-cell">
                  <el-form-item label="合作农场名称：" prop="inputFarmName" class="required label-center-align">
                    <el-input v-model="formData.inputFarmName" type="text" clearable suffix-icon="el-icon-user-solid" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" :push="2" class="grid-cell">
                  <el-form-item label="合作农场代号：" prop="inputFarmId" class="required label-center-align">
                    <el-input
                      v-model="formData.inputFarmId"
                      :disabled="!isAddForm"
                      type="text"
                      clearable
                      suffix-icon="el-icon-s-check"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10" :offset="1" class="grid-cell">
                  <el-form-item label="农场联系电话：" prop="inputFarmTel" class="required label-center-align">
                    <el-input
                      v-model="formData.inputFarmTel"
                      type="text"
                      clearable
                      :minlength="8"
                      :maxlength="11"
                      suffix-icon="el-icon-phone"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10" :push="2" class="grid-cell">
                  <el-form-item label="农场产品：" prop="inputfarmProduct" class="required label-center-align">
                    <el-input v-model="formData.inputfarmProduct" type="text" clearable suffix-icon="el-icon-cherry" />
                  </el-form-item>
                </el-col>
                <el-col :span="22" :push="1" class="grid-cell">
                  <el-form-item label="合作农场地址：" prop="inputfarmLocation" class="required label-center-align">
                    <el-input
                      v-model="formData.inputfarmLocation"
                      type="text"
                      clearable
                      suffix-icon="el-icon-office-building"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22" :push="1" class="grid-cell">
                  <el-form-item label="合作农场简介:" prop="textareaProfile" class="required label-center-align">
                    <el-input v-model="formData.textareaProfile" type="textarea" rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

          </template>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="addFarm">确 定</el-button>
          </div>
        </el-dialog>

        <el-scrollbar height="100px">
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            max-height="700px"
          >
            <el-table-column fixed type="index" label="编号" width="50" sortable />
            <el-table-column fixed prop="farmId" label="合作农场代号" width="120" />
            <el-table-column prop="farmName" label="合作农场名称" width="150" />
            <el-table-column prop="farmTel" label="联系电话" width="150" />
            <el-table-column prop="farmLocation" label="合作农场地址" width="300" />
            <el-table-column prop="farmProduct" label="合作农场相关产品" width="300" />
            <el-table-column prop="farmProfile" label="合作农场简介" width="700" />
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button
                  link
                  type="warning"
                  size="small"
                  @click.prevent="showAlterFarm(scope.row.id,scope.row.farmId)"
                >
                  修改
                </el-button>
                <el-button
                  link
                  type="danger"
                  size="small"
                  @click.prevent="deleteRow(scope.row.farmId)"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-scrollbar>

      </el-aside>
    </el-container>
    <el-footer>
      <el-pagination
        background
        align="right"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>

  </div>
</template>

<script>
import request from '@/request'

export default {
  name: 'FarmManagement',

  data() {
    return {
      loading: false,
      isAddForm: false,
      inputFarmId: '', // 用于修改时候获取farmId,记得置空哈
      pageNum: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      alterId: '', // 用于记录修改的序号
      input: '',
      select: '',
      options: [{
        value: 'farmId',
        label: '农场代号'
      }, {
        value: 'farmName',
        label: '农场名称'
      }],
      dialogFormVisible: false, // 对话表单的可视程度
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      value: '',
      tableData: [],
      formData: {
        inputFarmName: '',
        inputFarmId: '',
        inputFarmTel: '',
        inputfarmProduct: '',
        inputfarmLocation: '',
        textareaProfile: ''
      },
      rules: {
        inputFarmName: [{
          required: true,
          message: '记得输入农场名称哦^_^'
        }],
        inputFarmId: [{
          required: true,
          message: '记得输入农场代号哦^_^'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '要输入正确代号哦^_^'
        }],
        inputFarmTel: [{
          required: true,
          message: '记得输入联系电话哦^_^'
        }, {
          pattern: /^[1][3-9][0-9]{9}$/,
          trigger: ['blur', 'change'],
          message: '你输的是电话么？'
        }],
        inputfarmProduct: [{
          required: true,
          message: '记得输入农场产品哦^_^'
        }],
        inputfarmLocation: [{
          required: true,
          message: '记得输入农场地址哦^_^'
        }],
        textareaProfile: [{
          required: true,
          message: '记得输入农场简介哦^_^'
        }]
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.input = ''
      this.loading = true
      request.get('/farmInfoSurper/pageAll', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        setTimeout(() => {
          this.loading = false
        }, 300)
        this.$notify({
          type: 'success',
          message: '读取成功!',
          offset: 70
        })
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      if (this.input === '') {
        this.load()
      } else {
        this.search()
      }
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      if (this.input === '') {
        this.load()
      } else {
        this.search()
      }
    },
    deleteRow(index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index)
        request.delete('farmInfoSurper/delById/' + index).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.load() // 删除之后重新加载表格的数据
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      console.log('这里进行删除一行')
    },
    alterRow(index) {
      console.log(index)
      console.log('这里进行修改一行')
    },
    search() {
      /**
       *农场代号精确搜索,名称模糊搜索
       */
      const choose = this.$refs['“optionRef”'].selected.value
      if ((this.input === '') || choose === '') {
        this.$message({
          type: 'warning',
          message: '输入不可为空'
        })
        return
      }
      this.loading = true
      if (choose === 'farmId') {
        request.get('/farmInfoSurper/findById/' + this.input).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.tableData = res.data
            this.$message({
              type: 'success',
              message: '农场代号搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      } else {
        request.get('/farmInfoSurper/findByFarmName/', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            farmName: this.input
          }
        }).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.tableData = res.data.records
            this.total = res.data.total
            this.$message({
              type: 'success',
              message: '农场名称搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }
      setTimeout(() => {
        this.loading = false
      }, 300)
    },
    showAlterFarm(id, farmId) {
      this.alterId = id
      this.dialogFormVisible = true
      this.isAddForm = false
      this.formData.inputFarmId = farmId
    },
    showAddFarm() {
      this.isAddForm = true
      this.dialogFormVisible = true
    },
    addFarm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) {
          this.$message({
            type: 'warning',
            message: '警告：请检查填写信息'
          })
          return
        }
        // TODO: 提交表单
        if (this.isAddForm) {
          if (this.formData.inputFarmId === '') {
            this.$message({
              type: 'warning',
              message: '警告：未填写表单'
            })
            return
          }
          // 代表现在是新增表单数据
          request.get('/farmInfoSurper/add', {
            params: {
              farmId: this.formData.inputFarmId,
              farmName: this.formData.inputFarmName,
              farmTel: this.formData.inputFarmTel,
              farmLocation: this.formData.inputfarmLocation,
              farmProduct: this.formData.inputfarmProduct,
              farmProfile: this.formData.textareaProfile
            }
          }).then(res => {
            console.log(res)
            if (res.code === 20000) {
              this.load()
              this.dialogFormVisible = false
              this.$refs['vForm'].resetFields()
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        } else {
          // 这里是修改表单页面，与上述的区别是获取了序号
          request.get('/farmInfoSurper/update', {
            params: {
              id: this.alterId,
              farmId: this.formData.inputFarmId,
              farmName: this.formData.inputFarmName,
              farmTel: this.formData.inputFarmTel,
              farmLocation: this.formData.inputfarmLocation,
              farmProduct: this.formData.inputfarmProduct,
              farmProfile: this.formData.textareaProfile
            }
          }).then(res => {
            console.log(res)
            if (res.code === 20000) {
              this.load()
              this.dialogFormVisible = false
              this.$refs['vForm'].resetFields()
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.$refs['vForm'].resetFields()
      this.$message({
        type: 'info',
        message: '已取消操作'
      })
    }

  }
}
</script>

<style scoped>

</style>
